<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" fullscreen append-to-body class="test_paper_dialog">
		<template slot="title">112123</template>
		<el-form ref="form" size="medium" :model="formData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-scrollbar class="test_paper_chapter">
				<div class="total">
					<p>试卷总分：{{ testPaperTotalScore }}(该值自动计算，无需填写)</p>
				</div>
				<div id="chapterSortable" class="sortable">
					<chapter-item v-for="(item, index) in testPaperChapters" :key="index" :data="item">
						<el-button type="text" @click="handleSelectSubject(item)">选择试题</el-button>
						<el-button type="text" @click="handleDeleteChapter(index)">删除章节</el-button>
					</chapter-item>
				</div>
				<el-button class="added" type="primary" size="medium" icon="el-icon-plus" plain @click="handleAddedChapter()">新增章节</el-button>
			</el-scrollbar>
			<div class="test_paper_info">
				<el-scrollbar>
					<el-form-item label="试卷名称" prop="name">
						<el-input v-model="formData.name" placeholder="请输入试卷名称"></el-input>
					</el-form-item>
					<el-form-item label="试卷类型" prop="paperType">
						<el-select v-model="formData.paperType" placeholder="请选择试卷类型" style="width: 100%">
							<el-option label="完全私有" value="1"></el-option>
							<el-option label="只读共享" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="试卷类型" prop="paperType">
						<el-select v-model="formData.paperType" placeholder="请选择试卷类型" style="width: 100%">
							<el-option label="完全私有" value="1"></el-option>
							<el-option label="只读共享" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="试卷分类" prop="paperClassId">
						<el-select v-model="formData.paperClassId" placeholder="请选择试卷分类" style="width: 100%">
							<el-option label="完全私有" value="1"></el-option>
							<el-option label="只读共享" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="管理权限" prop="permission">
						<el-select v-model="formData.permission" placeholder="请选择访问权限" style="width: 100%">
							<el-option label="完全私有" value="1"></el-option>
							<el-option label="只读共享" value="2"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="试卷状态" prop="status">
						<el-radio-group v-model="formData.status" v-removeAriaHidden>
							<el-radio label="1">正常</el-radio>
							<el-radio label="2">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="试卷说明">
						<el-input type="textarea" v-model="formData.des"></el-input>
					</el-form-item>
				</el-scrollbar>
				<div class="button">
					<el-button size="medium" type="primary" :loading="loading" @click="handleSubmitForm()">{{ formTypeText }}</el-button>
					<el-button size="medium" @click="visible = false">取消</el-button>
				</div>
			</div>
		</el-form>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import Sortable from 'sortablejs';
import chapterItem from './chapter';
import formMixins from '@/mixins/formMixins';
import { papersDetail, addedPapers, updatePapers } from '@/api/exam/testPaper';
export default {
	mixins: [formMixins],
	components: { chapterItem },
	data() {
		return {
			sortable: null,
			formName: '试卷',
			formRules: {
				name: [{ required: true, message: '请输入试卷名称', trigger: 'blur' }],
				type: [{ required: true, message: '请选择试卷分类', trigger: 'change' }]
			},
			testPaperChapters: [],
			testPaperTotalScore: 0
		};
	},
	computed: {
		detailData() {
			return eval(papersDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addedPapers : updatePapers);
		}
	},
	watch: {
		testPaperChapters: {
			handler(arr) {
				let subjectArrs = lodash.flatMap(arr, (obj) => {
					return obj.testSubjectVO.map((n) => ({ ...n, score: parseFloat(n.score) }));
				});
				this.testPaperTotalScore = lodash.sumBy(subjectArrs, 'score');
			},
			deep: true
		}
	},
	methods: {
		formatFormParams() {
			this.testPaperTotalScore = this.formData?.totalScore || 0;
			this.testPaperChapters = this.formData?.testPaperChapterList || [];
			if (this.testPaperChapters.length > 1) {
				this.initSortable();
			} else if (!!this.sortable) {
				this.sortable.destroy();
			}
		},

		//初始化拖拽
		initSortable() {
			let ele = document.getElementById('chapterSortable');
			this.sortable = Sortable.create(ele, {
				animation: 150,
				handle: '.header',
				onSort(evt) {
					console.log(evt);
					console.log(evt.item);
				}
			});
		},

		//新增章节
		handleAddedChapter() {
			let id = this.$genUUID();
			this.testPaperChapters.push({ id, title: '', des: '', testSubjectVO: [] });
		},

		//选择试题
		handleSelectSubject(data) {},

		//删除章节
		handleDeleteChapter(index) {
			this.testPaperChapters.splice(index, 1);
		}
	}
};
</script>
<style lang="scss">
.test_paper_dialog {
	.el-dialog__body {
		padding: 0;
		.el-form {
			display: flex;
			flex: 1;
			overflow: hidden;
		}
	}
	.el-scrollbar__wrap {
		overflow-x: hidden;
	}
}
</style>
<style lang="scss" scoped>
.test_paper_info::v-deep {
	display: flex;
	width: 25%;
	min-width: 320px;
	max-width: 480px;
	flex-direction: column;
	border-left: solid 1px #e5e5e5;
	.el-scrollbar {
		flex: 1;
		overflow: hidden;
	}
	.el-scrollbar__view {
		padding: 22px 16px 0;
	}
	.button {
		padding: 16px;
		text-align: right;
		border-top: solid 1px #e5e5e5;
	}
}
.test_paper_chapter::v-deep {
	flex: 1;
	overflow: hidden;
	.el-scrollbar__view {
		padding: 16px;
	}
	.el-button.added {
		width: 100%;
		margin-top: 16px;
	}
}
</style>
